<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('文件上传')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>文件上传控件
                        <small>https://github.com/kartik-v/bootstrap-fileinput</small>
                    </h5>
                </div>
                <div class="ibox-content">
                    <div class="form-group">
                        <label class="font-noraml">简单示例</label>
                        <div class="file-loading">
                            <input class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-noraml">多文件上传</label>
                        <div class="file-loading">
                            <input id="fileinput-demo-1" type="file" multiple>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="font-noraml">相关参数详细信息</label>
                        <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput"
                                target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">

</script>
<script type="text/javascript">

    $(document).ready(function () {
        /*$("#fileinput-demo-1").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '#',
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: [
                "/img/profile.jpg"
            ]
        });*/
        $("#fileinput-demo-1").fileinput({
            'theme': 'explorer-fas',
            overwriteInitial: false,
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            dropZoneTitle: '可以将图片拖放到这里 …支持多文件上传',
            uploadUrl: "upfile", //上传的地址
            uploadExtraData: function (previewId, index) {   //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}，在PHP中你可以读取这些数据$_POST['id']
                var id = $('#id').val();
                return {seriesId: id};
            },
            allowedFileExtensions: ['jpg', 'png', 'bmp', 'zip', 'rar', 'jpeg', 'xls', 'doc', 'pdf', 'xlsx', 'docx', 'ppt', 'pptx'],//接收的文件后缀
            enctype: 'multipart/form-data',
            uploadAsync: true, //默认异步上传
            showUpload: true, //是否显示上传按钮
            showRemove: true, //显示移除按钮
            showPreview: true, //是否显示预览
            showCancel: true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
            showCaption: true,//是否显示文件标题，默认为true
            browseClass: "btn btn-primary", //文件选择器/浏览按钮的CSS类。默认为btn btn-primary
            dropZoneEnabled: true,//是否显示拖拽区域
            maxFilePreviewSize: 0,
            maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
            maxFileCount: 5, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
            //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",//字符串，当文件数超过设置的最大计数时显示的消息 maxFileCount。默认为：选择上传的文件数（{n}）超出了允许的最大限制{m}。请重试您的上传！
        }).on('filebatchpreupload', function (event, data) { //该方法将在上传之前触发
            var id = $('#id option:selected').val();
            if (id == 0) {
                return {
                    message: "请选择", // 验证错误信息在上传前要显示。如果设置了这个设置，插件会在调用时自动中止上传，并将其显示为错误消息。您可以使用此属性来读取文件并执行自己的自定义验证
                    data: {} // any other data to send that can be referred in `filecustomerror`
                };
            }
        }).on("filebatchselected", function (event, data) {//选择即上传
            if (data.length == 0) {
                return;
            }
        }).on('fileuploaded', function (event, data) {//异步上传成功结果处理
            $("#fileinput-demo-1").val();
        }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
            alert("上传失败");
            console.log(event, data, msg);
        }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
            alert("上传失败");
            console.log(event, data, msg);
        }).on('filebatchuploadsuccess', function (event, data, previewId, index) {//同步上传回调

        });
    });
</script>
</body>
</html>
